import React, { ReactElement } from 'react';
import {
  AtButton,
  AtDivider,
  AtForm,
  AtInput,
  AtMessage,
} from 'taro-ui';
import './login.scss';

interface Props {
  count: number;
  add: () => void;
  go: () => void;
  goRegister: () => void;
  setName: (username: string) => void;
  setPassword: (password: string) => void;
  handleLogin: () => void;
}

const perfix = 'login_view';

const loginView = ({
  count,
  goRegister,
  go,
  setName,
  setPassword,
  handleLogin,
}: Props): ReactElement => (
  <div className={`${perfix}_warpper`}>
    <AtForm>
      <AtInput
        name="value"
        title="用户名"
        type="text"
        placeholder="请输入用户名"
        onChange={(value) => setName(value as string)}
      ></AtInput>

      <AtInput
        name="value"
        title="密码"
        type="password"
        placeholder="请输入密码"
        onChange={(value) => setPassword(value as string)}
      ></AtInput>

      <AtButton
        size="small"
        type="primary"
        onClick={handleLogin}
      >
        登录
      </AtButton>
    </AtForm>

    <AtDivider content=" " />

    <AtButton
      size="small"
      type="primary"
      onClick={goRegister}
    >
      注册
    </AtButton>

    <AtDivider content=" " />

    {/* <AtButton size="small" type="primary" onClick={go}>
      游客登录
    </AtButton> */}

    <AtMessage />
  </div>
);

export default loginView;
